<template>
  <el-card  class="aui-card--fill">
    <div class="mod-adx__totalstatistics}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <!-- <el-form-item>
          <el-checkbox-group v-model="selectedColumns">
            <el-checkbox v-for="column in allColumns" :label="column.prop" :key="column.prop">{{ column.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item> -->
        
        <el-form-item label="产品">
          <el-input v-model="dataForm.product" placeholder="产品" clearable></el-input>
          </el-form-item>
          <el-form-item label="甲方渠道">
          <el-input v-model="dataForm.partyChannel" placeholder="甲方渠道" clearable></el-input>
          </el-form-item>
          <el-form-item label="乙方渠道">
          <el-input v-model="dataForm.secondChannel" placeholder="乙方渠道" clearable></el-input>
          </el-form-item>
          <el-form-item label="运营人员">
            <el-select v-model="dataForm.operate" placeholder="运营人员" filterable clearable>
              <el-option v-for="item in userNameList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商务">
            <el-select v-model="dataForm.directBusiness" placeholder="商务" filterable clearable>
              <el-option v-for="item in businessList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select v-model="dataForm.type" placeholder="业务类型" filterable clearable>
              <el-option v-for="item in typeList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="起始时间">
          <el-date-picker v-model="dataForm.stime" value-format="yyyy-MM-dd" type="date"
            placeholder="起始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="dataForm.etime" value-format="yyyy-MM-dd" type="date"
            placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
          
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('adx:totalstatistics:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('adx:totalstatistics:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  type="success" @click="download()">模板下载</el-button>
        </el-form-item>
              <el-form-item>
          <el-upload
              class="upload-demo"
              :on-success="handFileSuccess"
              :action="exportURL">
              <el-button  type="warning">导入报表</el-button>
              </el-upload>
        </el-form-item>
      </el-form>
     
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"   style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column v-for="column in visibleColumns" :key="column.prop" :prop="column.prop" :label="column.label" header-align="center" align="center">
          <template slot-scope="scope">
            <span v-if="column.prop === 'type'">
              {{ $getDictLabel("bizTypeList", scope.row.type) }}
            </span>
            <span v-else-if="column.prop === 'profit'">
                <el-tag effect="dark" type="danger" v-if="scope.row.profit < '0' ">
                  {{ scope.row[column.prop] }}
                </el-tag>
              <span  v-else>
                {{ scope.row[column.prop] }}
              </span>
            </span>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </template>


        </el-table-column>

        <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column v-if="false" prop="id" label="主建ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="product" label="产品" header-align="center" align="center"></el-table-column>
        <el-table-column prop="productCode" label="产品编码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="partyChannel" label="甲方渠道" header-align="center" align="center"></el-table-column>
        <el-table-column prop="secondChannel" label="乙方渠道" header-align="center" align="center"></el-table-column>
        <el-table-column prop="profit" label="总收益" header-align="center" align="center"></el-table-column>
        <el-table-column prop="directBusiness" label="执行商务" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="directBusinessProfit" label="执行商务收益" header-align="center" align="center"></el-table-column>
        <el-table-column prop="joinBusiness" label="对接商务" header-align="center" align="center"></el-table-column>
        <el-table-column prop="joinBusinessProfit" label="对接商务收益" header-align="center" align="center"></el-table-column>
        <el-table-column prop="operate" label="运营" header-align="center" align="center"></el-table-column>
        <el-table-column prop="operateProfit" label="运营收益" header-align="center" align="center"></el-table-column>
        <el-table-column prop="day" label="日期" header-align="center" align="center"></el-table-column>
         <el-table-column prop="month" label="月份" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column> -->
        <!-- <el-table-column prop="type" label="业务类型" header-align="center" align="center">
            <template slot-scope="scope">
              {{ $getDictLabel("bizTypeList", scope.row.type) }}
            </template>
        </el-table-column> -->
         <!-- 添加汇总行 -->
          <!-- 添加汇总行 -->
        <template #append>
          <tr class="summary-row">
            <td colspan="100%" class="summary-cell">
              <div class="summary-content">
                <span>总收益: {{ totalProfit }}</span>
                <span>运营总收益: {{ totalOperateProfit }}</span>
                <span>执行商务总收益: {{ totalProfitBusiness }}</span>
              </div>
            </td>
          </tr>
        </template>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('adx:totalstatistics:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('adx:totalstatistics:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
            <el-button   type="text" size="small" @click="copyData(scope.row.id)">复制数据</el-button>
          </template>
        </el-table-column>
        
      </el-table>
 
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!-- <el-button icon="el-icon-s-tools" @click="showColumnFilter = !showColumnFilter" style="position: absolute; top: 140px; right: 20px;"></el-button> -->
      <i class="el-icon-s-operation filter-icon" @click="showColumnFilter = !showColumnFilter" style="position: absolute; top: 199px; right: 40px; font-size: 14px;"> 筛选字段</i>
      <el-dialog title="选择列" :visible.sync="showColumnFilter">
        <el-select v-model="selectedColumns" multiple filterable placeholder="选择列" style="width: 100%;">
          <el-option v-for="column in allColumns" :key="column.prop" :label="column.label" :value="column.prop"></el-option>
        </el-select>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './totalstatistics-add-or-update'
import { getDictDataList } from '@/utils'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/adx/totalstatistics/page',
        getDataListIsPage: true,
        exportURL: '/adx/totalstatistics/export',
        deleteURL: '/adx/totalstatistics',
        deleteIsBatch: true
      },
      userNameList: [],
      businessList: [],
      typeList: [],
      exportURL: window.SITE_CONFIG['apiURL'] + '/adx/totalstatistics/import',
      dataForm: {
        id: ''
      },
      totalProfit: 0,
      totalOperateProfit:0,
      totalProfitBusiness:0,
      allColumns: [
        { prop: 'day', label: '日期' },
        { prop: 'product', label: '产品' },
        { prop: 'productCode', label: '产品编码' },
        { prop: 'partyChannel', label: '产品公司名' },
        { prop: 'channel', label: '渠道' },
        { prop: 'secondChannel', label: '渠道公司名' },
        { prop: 'resultNumber', label: '转化数量' },
        { prop: 'partyPrice', label: '甲方单价' },
        { prop: 'partySetter', label: '甲方结算金额' },
        { prop: 'secondPrice', label: '乙方单价' },
        { prop: 'secondSetter', label: '乙方结算金额' },
        { prop: 'profit', label: '总收益' ,sortable:true},
        { prop: 'directBusiness', label: '执行商务' },
        { prop: 'directBusinessProfit', label: '执行商务收益' },
        { prop: 'joinBusiness', label: '对接商务' },
        { prop: 'joinBusinessProfit', label: '对接商务收益' },
        { prop: 'operate', label: '运营' },
        { prop: 'operateProfit', label: '运营收益' },
        { prop: 'type', label: '业务类型' },
        { prop: 'remark', label: '备注' }
      ],
      selectedColumns: ['product', 'partyChannel', 'secondChannel', 'profit', 'directBusiness',  'directBusinessProfit', 'operate', 'operateProfit', 'day', 'type','channel'],
      showColumnFilter: false
   
    }
  },
  computed: {
    visibleColumns() {
      return this.allColumns.filter(column => this.selectedColumns.includes(column.prop));
    }
  },
  mounted() {
    this.getNameDict();
    this.getBusinessDict();
    this.getTypeDict();
  },
  components: {
    AddOrUpdate
  },
  methods: {
    getNameDict() {
      this.userNameList = getDictDataList("userNameList")
    },
    copyData(id){
      //复制账户的功能
      this.$confirm('确认要复制当前数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
               return this.$http.get('/adx/totalstatistics/copy?id='+id).then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.getDataList()
              this.$message('数据复制成功')
               })
          }).catch(() => {
                   
        });
    },
    download() {
      window.open(window.SITE_CONFIG['apiURL'] + '/adx/totalstatistics/download')
    },
    handFileSuccess() {
      this.getDataList()
    },
    getBusinessDict() {
      this.businessList = getDictDataList("businessList")
    },
    getTypeDict() {
      this.typeList = getDictDataList("bizTypeList")
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '数据合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === 'profit' || column.property === 'directBusinessProfit' || column.property === 'joinBusinessProfit' || column.property === 'operateProfit') {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return Math.floor((prev + curr) * 100) / 100;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '---'
          }
        }
      });
      return sums;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.dataList.length) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (columnIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

<style scoped>
.filter-icon {
  position: absolute;
  right: 40px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .filter-icon {
    top: 199px !important;
  }
}

@media (min-width: 769px) {
  .filter-icon {
    top: 145px !important;
  }
}
.summary-row {
  background-color: #f5f5f5; /* 浅灰色背景 */
  font-weight: bold;         /* 加粗字体 */
  text-align: right;  
  display: flex;     
}

.summary-cell {
  padding: 10px; /* 内边距 */
  width: 100%; /* 确保有足够的宽度 */
}

.summary-content {
  display: flex !important;;
  justify-content: flex-end !important;;  /* 内容右对齐 */
  gap: 20px !important;;                 /* 各统计项之间的间距 */
}

.summary-content span {
  background-color: #eef1f6;  /* 背景色 */
  padding: 2px 5px;          /* 内边距 */
  border-radius: 3px;        /* 圆角 */
  white-space: nowrap;       /* 防止换行 */
}
</style>